<template>
  <div>
    <div class="album">
      <img :src="hotImg">
      <div class="songList">
        <h4>热门50首</h4>
        <ul>
          <li class="item" v-for="(item,index) in hot50" :key="item.id" @dblclick="playSong(item.id)">
            <span class="index">{{ index + 1 }}</span>
            <span class="action"><i class="iconfont icon-aixin-xian"></i></span>
            <span class="songName">
               <i class="songname">{{item.name}}</i>
               <span class="icon" v-show="item.mv>0" @click="toWatch(item.mv)"><i class="iconfont icon-video"></i></span>
               <span class="vip" v-show="item.fee ==1"><i class="iconfont icon-VIP"></i></span>
            </span>
            <span class="time">{{getSongTime(item.dt)}}</span>
          </li>
        </ul>
        <span class="getAllHot" @click="loadAllHot()" ref="loadHot">加载全部50首</span>
      </div>
    </div>
     <div class="album" v-for="(album,index1) in albums" :key="album.id">
      <img :src="album.picUrl">
      <div class="songList">
        <h4>{{album.name}}</h4>
        <ul>
          <li class="item" v-for="(item,index) in albumDeatil[index1]" :key="item.id" @dblclick="playSong(item.id)">
            <span class="index">{{ index + 1 }}</span>
            <span class="action"><i class="iconfont icon-aixin-xian"></i></span>
            <span class="songName">
               <i class="songname">{{item.name}}</i>
               <span class="icon" v-show="item.mv>0" @click="toWatch(item.mv)"><i class="iconfont icon-video"></i></span>
               <span class="vip" v-show="item.fee ==1"><i class="iconfont icon-VIP"></i></span>
            </span>
            <span class="time">{{getSongTime(item.dt)}}</span>
          </li>
        </ul>
      </div>
    </div>
    <span class="loadMore" @click="loadMore()">加载更多</span>
  </div>
</template>

<script>
import {getHot50API,getSingerAlbumAPI,getAlbumAPI} from '@/api'
export default {
  name: "SingerSong",
  data() {
    return {
      hotImg:require('@/assets/images/hot50.png'),
      hot50:[],//热门50首
      albums:[], //专辑列表
      albumOffset:0, //专辑分页
      albumDeatil:[], //每张专辑歌曲
    }
  },
  methods:{
    //获取歌手热门50首歌曲
    async getHot50(limit){
      const res = await getHot50API({id:this.id});
      if(res.data.code==200) this.hot50 = res.data.songs.slice(0,limit);
      else alert('获取歌手热门歌曲失败');
    },
     //处理多位歌手
    getAllsinger(arr) {
      let singers = "";
      arr.forEach((item) => {
        singers += item.name;
        singers += "/";
      });
      return singers.slice(0, singers.length - 1);
    },
     //处理歌曲时间  参数单位毫秒
    getSongTime(time){
      let secondSum = Math.floor(time/1000);
      let min = Math.floor(secondSum/60);
      let second = secondSum%60;
      if(min<10){
        min = '0'+min
      }
      if(second<10){
        second = '0' + second
      }
      return min+':'+second
    },
    // 获取歌手专辑
    async getSingerAlbum(){
      const res = await getSingerAlbumAPI({id:this.id,limit:5,offset:this.albumOffset});
      this.albums = this.albums.concat(res.data.hotAlbums);
      let songRes = {}
      res.data.hotAlbums.forEach(async item=>{
        songRes = await getAlbumAPI({id:item.id});
        this.albumDeatil.push(songRes.data.songs)
      })
    },
    // 加载更多
    loadMore(){
      this.albumOffset += 5;
      this.getSingerAlbum();
    },
    //播放歌曲
    playSong(id){
      this.$store.dispatch('play/updateSongId',id)
    },
    // 加载热门50首
    loadAllHot(){
      this.getHot50(50);
      this.$refs.loadHot.style.display="none";
    },
    // 去看mv
     toWatch(id) {
      this.$router.push({
        name: "watch",
        query: {
          id,
        },
      });
    },
  },
  computed:{
    id(){
      return this.$route.query.id
    }
  },
  created(){
    this.getHot50(10);
    this.getSingerAlbum();
  }
};
</script>

<style lang="less" scoped>
ul {
  width: 100%;
  font-size: 13px;
  color: #333;
  li {
    display: block;
    height: 35px;
    width: 100%;
    display: flex;
    user-select: none;
    span {
      display: block;
      color: #666;
      line-height: 35px;
      cursor: default;
    }
    .index {
      width: 5%;
      text-align: center;
      color: #999;
    }
    .action {
      width: 5%;
      text-align: center;
    }
    .songName {
      width: 73%;
      color: black;
      display: flex;
      i {
        font-style: normal;
        display: block;
      }
      .songname {
        max-width: 200px;
        overflow: hidden;
        word-wrap: break-word; /*强制换行*/
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*隐藏后添加省略号*/
        white-space: nowrap; /*强制不换行*/
      }
      .vip{
        width: 20px;
        height: 12px;
        color: #ff7a9e;
        margin-top: 1px;
        margin-left: 2px;
          i{
          font-size: 28px;
          
          }
      }
      .icon {
        margin-left: 5px;
        margin-top: 11px;
        cursor: default;
        width: 20px;
        height: 12px;
        color: #ff7a9e;
        cursor: pointer;
        i {
          margin-top: -10px;
          font-size: 16px;
          text-align: center;
        }
        
      }
      .vip{
        font-size: 12px;
      }
      .icon:hover{
        color:#f39db4 ;
      }
    }
    .time {
      width: 17%;
      color: #999;
      overflow: hidden;
      word-wrap: break-word; /*强制换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
  }
  li:nth-child(2n-1) {
    background-color: rgb(249, 249, 249);
  }
  .item:hover {
    background-color: rgb(240, 241, 242);
  }
  .item .action:hover {
    color: black;
  }
}
img{
  width: 150px;
  height: 150px;
  border-radius: 6px;
}
.album{
  width: 93%;
  margin: 10px auto 40px auto;
  display: flex;
  justify-content: space-between;
}
h4{
  margin: 0;
  margin-bottom: 10px;
}
.songList{
  width: 70%;
  position: relative;
}
.loadMore{
  display: block;
  cursor: pointer;
  margin: 0 auto 30px auto;
  font-size: 12px;
  color: #999;
  width: 100px;
}
.loadMore:hover{
  color: black;
}
.getAllHot{
  display: block;
  cursor: pointer;
  position: absolute;
  right: -15px;
  bottom: -17px;
  font-size: 12px;
  color: #999;
  width: 100px;
}
.getAllHot:hover{
  color: black;
}
</style>